<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>视频监控</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">

</head>

<body>
    <main class="main">
        <header class="heared">
            <span class="head-logo">新能源智能环境管理系统</span>
            <ul class="head-ul">
                <li><a href="home.html">首页</a> </li>
                <li><a href="videlctr.html" class="active-a">视频监控</a> </li>
                <li><a href="https://dingkeke.cn/hgr/index.html" target="_blank">环境监测</a> </li>
                <li><a href="static.html">统计分析</a> </li>
                <li><a href="form.html">表单信息</a> </li>
                <li><a href="user.html">用户管理</a></li>
                <li><a href="part.html">部门管理</a></li>
                <li><a href="date.html">日程管理</a></li>

            </ul>
            <div class="head-right"><span id="time"></span><span>管理员：王安邦</span></div>
        </header>
        <!--身体-->
        <section class="section commanBox">
            <!--左侧区域-->
            <div class="boxLeft">
                <!--视频监控-->
                <div class="boxLeftVideoTop"></div>
                <div class="clear"></div>
                <div class="boxLeftVideoBox">
                    <div class="BoxConTop"><span class="BoxconTopLeft">仓库一（20170600）</span><span
                            class="BoxconTopRight"><img src="img/ico.png" /> </span></div>
                    <div class="boxLeftVideoBoxCon">
                        <img src="webm/cangku1.jpg" width="100%" height="100%">
                        </img>
                    </div>
                    <div class="clear"></div>
                    <div class="BoxConTop"><span class="BoxconTopLeft">仓库2（20170601）</span><span
                            class="BoxconTopRight"><img src="img/ico.png" /> </span></div>
                    <div class="boxLeftVideoBoxCon">
                        <img src="webm/cangku2.jpg
                    " width="100%" height="100%">
                        </img>
                    </div>
                </div>
                <div class="clear"></div>
                <!--报警信息-->
                <div class="boxLeftAram">
                    <div class="boxLeftAlamTop"></div>
                    <div class="boxLeftAlamCon">
                        <ul class="alamUl">
                            <li>
                                <p>预警地点：一仓库三室<span class="alamULspan">2017-07-13 / 14:25</span></p>
                                <p>预警备注：温度过高，请尽快做出调整</p>
                            </li>
                            <li>
                                <p>预警地点：一仓库二室<span class="alamULspan">2017-07-13 / 14:25</span></p>
                                <p>预警备注：湿度过高，请尽快做出调整</p>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <!--中间区域-->
            <div class="boxCenter">
                <!--案件分析-->
                <div class="boxCenterUp">
                    <div class="boxCentterUpLeft">
                        <div class="ananBg"><img src="img/ana01.png" class="ana01IMg" />
                            <div class="anaImgText">3</div>
                        </div>
                        <div class="anaText">预警总量</div>

                    </div>
                    <div class="boxCentterUpLeft">
                        <div class="ananBg"><img src="img/ana02.png" class="ana01IMg" />
                            <div class="anaImgText01">3</div>
                        </div>
                        <div class="anaText">事件处理量</div>

                    </div>

                    <div class="boxCentterRight"></div>
                </div>
                <div class="clear"></div>
                <!--地图区域-->
                <div class="boxCenterdown">
                    <div class="boxCenterMap">
                        <div class="mapTool01">
                            <a href="#" class="mapToolA01 mapToolA01Active"></a>
                            <a href="#" class="mapToolA02"></a>
                            <a href="#" class="mapToolA03"></a>
                            <a href="#" class="mapToolA04"></a>
                        </div>
                        <div class="mapTool02">
                            <ul>
                                <li class="mapToolA05"> </li>
                                <li class="mapToolA06"> </li>
                                <li class="mapToolA07"> </li>
                                <li class="mapToolA08"> </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--右边区域-->
            <div class="boxRight">
                <div class="boxRightTop"></div>
                <div class="clear"></div>
                <div class="boxRightCon01">
                    <ul class="boxRightCon_ul">
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li02.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li02.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li03.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li03.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                        <li> 视频点位001<span><img src="img/li01.png" /> </span></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="boxRightCon02">
                    <div class="boxRightcon02Top">
                        <ul class="con02TopUL">
                            <li class="con02liAcitve">种子信息</li>
                            <li>人员信息</li>
                            <li>地名地址</li>
                        </ul>
                    </div>
                    <div class="boxRithtChangeBox">
                        <!--种子信息-->
                        <div class="boxChangeCon" style="display: block">
                            <div class="boxChangeConFind">
                                <p><label class="boxFindLabel">种子种类：</label><select class="boxFindInput">
                                        <option>小麦</option>
                                    </select><label class="boxFindLabel">种子位置：</label><input type="text"
                                        class="boxFindInput" /></p>

                                <p><button class="boxFindButton">开始搜索</button></p>
                            </div>
                            <div class="clear"></div>

                            <ul id="pageAll">
                                <li>
                                    <div class="liImgLeft"><img src="img/xiaomai.png" /> </div>
                                    <div class="liConRight">
                                        <p>种子种类：<span>小麦</span><span class="liconRihtButSpan"><button>定位</button></span>
                                        </p>
                                        <p>种子位置：<span>仓库2（20230601）</span><span
                                                class="liconRihtButSpan"><button>详情</button></span></p>
                                    </div>
                                </li>
                                <li>
                                    <div class="liImgLeft"><img src="img/shuidao.png" /> </div>
                                    <div class="liConRight">
                                        <p>种子种类：<span>水稻</span><span class="liconRihtButSpan"><button>定位</button></span>
                                        </p>
                                        <p>种子位置：<span>仓库1（20230600）</span><span
                                                class="liconRihtButSpan"><button>详情</button></span></p>
                                    </div>
                                </li>
                                <li>
                                    <div class="liImgLeft"><img src="img/huasheng.png" /> </div>
                                    <div class="liConRight">
                                        <p>种子种类：<span>红皮花生</span><span
                                                class="liconRihtButSpan"><button>定位</button></span></p>
                                        <p>种子位置：<span>仓库3（20230602）</span><span
                                                class="liconRihtButSpan"><button>详情</button></span></p>
                                    </div>
                                </li>
                                <li>
                                    <div class="liImgLeft"><img src="img/sheguo.png" /> </div>
                                    <div class="liConRight">
                                        <p>种子种类：<span>蛇果</span><span class="liconRihtButSpan"><button>定位</button></span>
                                        </p>
                                        <p>种子位置：<span>仓库4（20230604）</span><span
                                                class="liconRihtButSpan"><button>详情</button></span></p>

                                    </div>
                                </li>

                            </ul>
                            <div class="boxChangeFoot">
                                <span class="page_box">
                                    <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span
                                            style="padding:3px;">/</span><span class="total"></span>
                                    </span><a class="next">下一页</a>
                                </span>
                            </div>


                        </div>
                        <!--人员详情-->
                        <div class="boxChangeCon">
                            <div class="boxChangeConFind">
                                <p><label class="boxFindLabel">人员名称：</label><input type="text"
                                        class="boxFindInput" /><label class="boxFindLabel">性别：</label><select
                                        class="boxFindInput">
                                        <option>男</option>
                                    </select></p>
                                <p><label class="boxFindLabel">年龄：</label><input type="text" class="boxFindInput" />
                                </p>
                                <p><button class="boxFindButton">开始搜索</button></p>
                            </div>
                            <div class="clear"></div>
                            <ul id="pageAll01">
                                <li>
                                    <div class="liImgLeft"><img src="img/liImg.png" /> </div>
                                    <div class="liConRight">
                                        <p>工号：<span>川A · 52FE2</span><span
                                                class="liconRihtButSpan"><button>定位</button></span></p>
                                        <p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span>
                                        </p>
                                        <p>职务：<span>大众</span></p>
                                    </div>
                                </li>
                                <li>
                                    <div class="liImgLeft"><img src="img/liImg.png" /> </div>
                                    <div class="liConRight">
                                        <p>工号：<span>川A · 52FE2</span><span
                                                class="liconRihtButSpan"><button>定位</button></span></p>
                                        <p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span>
                                        </p>
                                        <p>职务：<span>大众</span></p>
                                    </div>
                                </li>
                                <li>
                                    <div class="liImgLeft"><img src="img/liImg.png" /> </div>
                                    <div class="liConRight">
                                        <p>工号：<span>川A · 52FE2</span><span
                                                class="liconRihtButSpan"><button>定位</button></span></p>
                                        <p>姓名：<span>红色</span><span class="liconRihtButSpan"><button>详情</button></span>
                                        </p>
                                        <p>职务：<span>大众</span></p>
                                    </div>
                                </li>

                            </ul>
                            <div class="boxChangeFoot">
                                <span class="page_box">
                                    <a id="prev02">上一页</a><span class="num"><span id="current_page02">1</span><span
                                            style="padding:3px;">/</span><span id="total02"></span>
                                    </span><a id="next02">下一页</a>
                                </span>
                            </div>
                        </div>
                        <!--地名地址-->
                        <div class="boxChangeCon">
                            <div class="boxChangeConFind">
                                <p><label class="boxFindLabel">地名地址：</label><input type="text" class="boxFindInput" />
                                </p>
                                <p><button class="boxFindButton">开始搜索</button></p>
                            </div>
                            <div class="clear"></div>
                            <ul id="pageAll02">
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>
                                <li class="addLi">
                                    <div class="liConRight01">
                                        <p>地名地址：<span>天府广场001</span><span
                                                class="liconRihtButSpan01"><button>定位</button></span></p>

                                    </div>
                                </li>

                            </ul>
                            <div class="boxChangeFoot">
                                <span class="page_box">
                                    <a id="prev03">上一页</a><span class="num"><span id="current_page03">1</span><span
                                            style="padding:3px;">/</span><span id="total03"></span></span><a
                                        id="next03">下一页</a>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </section>

    </main>
    <script src="js/jquery.js"></script>

    <script src="js/index.js"></script>
    <script>
        $(function () {
            $(".head-ul li a").click(function () {
                $(this).addClass("active-a").parents("li").siblings().find("a").removeClass("active-a");
                $(this).parents('li').find("ul").show();
                $(this).parents("li").sibling().find("ul").hide();

            })
            getTime();
        })
        //    格式化时间
        function getTime() {
            var day = new Date();
            var year = day.getFullYear();
            var moutth = day.getMonth() + 1;
            var date = day.getDate();
            var hour = day.getHours();
            var min = day.getMinutes();
            var sec = day.getSeconds();
            var str = year + '-' + moutth + '-' + date + ' ' + hour + ":" + min + ':' + sec;
            $("#time").text(str);
        }
    </script>
</body>

</html>